<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>趣味儿刮刮乐</title>
    <style>
      body {
        margin: 0;
        background: #ecf0f1;
        display: flex;
        height: 100vh;
      }
      h1 {
        font-weight: 400;
        color: #2c3e50;
        letter-spacing: 3px;
      }
      p {
        margin: 0;
      }
      .wrap {
        width: 322px;
        margin: auto;
        text-align: center;
        margin-top: 26vh;
      }
      .container {
        position: relative;
        height: 110px;
        box-shadow: 8px 10px 10px 0px #ddd;
        margin: 30px auto 40px;
        background: #fff;
      }
      .content {
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 110px;
        font-size: 20px;
      }
      canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
      }
      .btn {
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h1>刮刮乐</h1>
      <div class="container">
        <p class="content"></p>
        <canvas></canvas>
      </div>
      <p class="btn">再刮一次</p>
    </div>
    <script>
      // 主体逻辑来自：https://juejin.cn/post/7142839691203575838
      let container = document.querySelector(".container");
      let content = document.querySelector(".content");
      let btn = document.querySelector(".btn");
      let canvas = document.querySelector("canvas");
      let ctx = canvas.getContext("2d");

      let awards = {
        1: "一等奖：核酸绿码一年",
        2: "二等奖：核酸绿码半年",
        3: "三等奖：方舱体验一周",
        4: "四等奖：免费核酸三天",
        5: "五等奖：小区周边一日游",
        6: "六等奖：美女一枚",
        7: "七等奖：帅哥一枚",
        8: "八等奖：休假一天",
        9: "九等奖：加班一天",
        10: "十等奖：十个大嘴巴子",
      };

      // 初始化刮刮乐，覆盖灰色图层
      function init() {
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "darkgray";
        ctx.fillRect(0, 0, 320, 150);
        setPrize();
        btn.style.display = "none";
      }

      // 设置随机奖项
      function setPrize() {
        let _key = String(Math.floor(Math.random() * 10 + 1));
        content.innerHTML = awards[_key];
      }

      // 刮奖
      canvas.addEventListener("touchmove", (e) => {
        let x = e.targetTouches[0].pageX - container.offsetLeft;
        let y = e.targetTouches[0].pageY - container.offsetTop;
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, 2 * Math.PI);
        ctx.globalCompositeOperation = "destination-out";
        ctx.fill();
        ctx.closePath();
        setTimeout(() => {
          btn.style.display = "inline-block";
        }, 1000);
      });

      // 每次刮完，都要计算已刮开区域占比，占比超过70%就都刮开
      canvas.addEventListener("touchend", (e) => {
        // 拿到画布上的像素点数组，每四个元素代表一个像素点，第四个是透明度，255不透明，0透明，128半透明
        let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        let len = imgData.data.length;
        let transparentData = 0;
        for (let i = 0; i < len; i += 4) {
          // 从第1个像素点开始，每次加4，拿到第二个像素点的透明度值
          if (imgData.data[i + 3] < 128) transparentData++;
        }
        let percent = (transparentData / (imgData.data.length / 4)) * 100;
        // 透明区域的像素点占所有像素点的比值超过60%，就清空画布
        if (percent >= 60) ctx.clearRect(0, 0, canvas.width, canvas.height);
      });

      // 重新刮奖
      btn.addEventListener("click", () => {
        init();
      });

      init();
    </script>
  </body>
</html>
